@import "variable";
@import "../../dist/css/sprite";
//@import "../font/font-awesome-4.7.0/less/font-awesome";

//总的按钮样式
.y-btn {
  height: 34px;
  padding: 0 15px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 0;
  color: #fff;
  background-color: #fff;
  user-select: none;
  vertical-align: middle;
  transition: .2s;
  > span {
    line-height: 1;
    .vertical();
  }
}

//按钮组的
.y-btn-putaway,
.y-btn-soldout{
  &:before {
    content: '';
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    margin-right: 10px;
  }
  color: @orange;
  border: 2px solid @orange;
  &:hover{
    color: #fff;
    background-color: @orange;
  }
}
.y-btn-putaway {
  &:before {
    .sprite(@btn-putaway);
  }
  &:hover{
    &:before {
      .sprite(@btn-putaway-hover);
    }
  }
}
.y-btn-soldout {
  &:before {
    .sprite(@btn-soldout);
  }
  &:hover{
    &:before {
      .sprite(@btn-soldout-hover);
    }
  }
}

.y-btn-add,
.y-btn-audit,
.y-btn-particulars,
.y-btn-modify,
.y-btn-search,
.y-btn-print,
.y-btn-certification,
.y-btn-approve,
.y-btn-delete{
  &:before {
    content: '';
    display: inline-block;
    margin-right: 10px;
    line-height: 1;
    vertical-align: middle;
  }
  .y-btn-noicon;
}
.y-btn-noicon{
  color: @green;
  border: 2px solid @green;
  &:hover{
    background-color: @green;
    color: #fff;
  }
}

.y-btn-add {
  &:before {
    .sprite(@btn-add);
  }
  &:hover{
    &:before {
      .sprite(@btn-add-hover);
    }
  }
}
.y-btn-delete{
  &:before {
    .sprite(@btn-delete);
  }
  &:hover{
    &:before {
      .sprite(@btn-delete-hover);
    }
  }
}
.y-btn-audit {
  &:before {
    .sprite(@btn-audit);
  }
  &:hover{
    &:before {
      .sprite(@btn-audit-hover);
    }
  }
}
.y-btn-particulars {
  &:before {
    .sprite(@btn-particulars);
  }
  &:hover{
    &:before {
      .sprite(@btn-particulars-hover);
    }
  }
}
.y-btn-search {
  &:before {
    .sprite(@btn-search);
  }
  &:hover{
    &:before {
      .sprite(@btn-search-hover);
    }
  }
}
.y-btn-modify {
  &:before {
    .sprite(@btn-modify);
  }
  &:hover{
    &:before {
      .sprite(@btn-modify-hover);
    }
  }
}
.y-btn-print {
  &:before {
    .sprite(@btn-modify);
  }
  &:hover{
    &:before {
      .sprite(@btn-modify-hover);
    }
  }
}
.y-btn-print {
  &:before {
    .sprite(@btn-modify);
  }
  &:hover{
    &:before {
      .sprite(@btn-modify-hover);
    }
  }
}
.y-btn-certification {
  &:before {
    .sprite(@btn-certification);
  }
  &:hover{
    &:before {
      .sprite(@btn-certification-hover);
    }
  }
}
.y-btn-approve {
  &:before {
    .sprite(@btn-approve);
  }
  &:hover{
    &:before {
      .sprite(@btn-approve-hover);
    }
  }
}

//表格内的按钮样式
.y-btn-detail{//详细
  &:before {
    content: '';
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    margin-right: 4px;
  }
  padding: 0 10px;
  height: 22px;
}
.y-btn-detail{
  &:before {
    .sprite(@btn-detail);
  }
  color: @green;
  border: 1px solid @green;
}

//各种背景色的按钮背景
.y-btn-default {
  background-color: @gray-light;
  &:hover, &:focus {
    background-color: @gray;
  }
}

.y-btn-primary {
  background-color: @primary;
  &:hover, &:focus {
    background-color: @primary-hover;
  }
}

.y-btn-success {
  background-color: @success;
  &:hover, &:focus {
    background-color: @success-hover;
  }
}

.y-btn-info {
  background-color: @info;
  &:hover, &:focus {
    background-color: @info-hover;
  }
}

.y-btn-warm {
  background-color: @warning;
  &:hover, &:focus {
    background-color: @warning-hover;
  }
}

.y-btn-danger {
  background-color: @danger;
  &:hover, &:focus {
    background-color: @danger-hover;
  }
}

//通过，未通过两个小icon
.pass-no,.pass-yes{
  content: '';
  .vertical();
  margin: 0 4px 2px;
}
.pass-yes{
  .sprite(@pass-yes);
}
.pass-no{
  .sprite(@pass-no);
}

//已上架，已下架，已检测背景图案
.putaway-on,.sold-out-on,.detect{
  display: inline-block;
  line-height: 24px;
  color: #fff;
  padding-left: 15px;
  margin-right: 10px;
}
.putaway-on{
  .sprite(@putaway);
}
.sold-out-on{
  .sprite(@sold-out);
}
.detect{
  .sprite(@detect);
}

//文字颜色
.red{
  color: @red;
}
.green{
  color: @green;
}

.table-button{
  border-width: 1px;
  padding: 0 1px;
  height: 20px;
  &:before{
    margin: 0;
  }
}